import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import {Button, Table} from 'antd'
import classnames from 'classnames'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const List = ({
                showModal, isMotion, location, ...tableProps
              }) => {

  const columns = [
    {
      title: '运营微号',
      dataIndex: 'operatorWxId',
      key: 'operatorWxId',
    }, {
      title: '微信昵称',
      dataIndex: 'operatorWxNickname',
      key: 'operatorWxNickname',
    }, {
      title: '归属员工',
      dataIndex: 'belongEmpName',
      key: 'belongEmpName',
    }, {
      title: '公司部门',
      dataIndex: 'department',
      key: 'department',
      render: department => department ? department.name : "-",
    }, {
      title: '敏感类型',
      dataIndex: 'sensitiveName',
      key: 'sensitiveName',
    }, {
      title: '操作时间',
      dataIndex: 'operationTime',
      key: 'operationTime',
    }, {
      title: '查看详情',
      key: 'detail',
      render: () => <Link to={''}>详情</Link>,
    }, {
      title: '关联微信号',
      dataIndex: 'relevantWxId',
      key: 'relevantWxId',
    }, {
      title: '是否有订单',
      dataIndex: 'hasOrder',
      key: 'hasOrder',
      render: hasOrder => hasOrder ? '√' : '×',
    },
    {
      title: '处理状态',
      dataIndex: 'processStatus',
      key: 'processStatus',
      render: (processStatus, record) => processStatus ? <Button className={'ant-btn-success'} size={'small'}>已处理</Button> : <Button onClick={() => showModal(record)} className={'ant-btn-warning'} size={'small'}>未处理</Button>,
    },
    {
      title: '处理人',
      dataIndex: 'processEmpName',
      key: 'processEmpName',
    },
    {
      title: '处理理由',
      dataIndex: 'processReason',
      key: 'processReason',
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table, {[styles.motion]: isMotion})}
      scroll={{x: 1500}}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
